<template>
	<view class="bgcolor" style="position: relative;background-color: #fff;" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'个人信息页修改'}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="top_right_text"></view>
				</view>
			</view>
		</header-top>
		<view class="forms">
			<view class="margin_top">真实姓名</view>
			<input placeholder="请输入真实姓名" class="inputStyle" border="surround" v-model="username"></input>
			<view class="flexbetween">
				<view class="" style="width: 50%;height: 68px;">
					<view class="margin_top">性别</view>
					<view class="flexleft" style='width: 40%;height: 50%;position: relative;'>
						<view class="sexSelect" @click="sexShow=true">{{sex}}</view>
						<image src="@/static/imags/mypage/xl.png" mode="widthFix"
							style="width: 10%;position: absolute;right: 20rpx;top: 50%;"></image>
						<u-picker :show="sexShow" :columns="columns" @confirm='sexConfirm' @cancel='sexShow=false'>
						</u-picker>
					</view>
				</view>

				<view class="" style="width:50%;">
					<view class="margin_top">生日</view>
					<view class="" style="width: 96%;position: relative;">
						<!-- <u-input @focus='calendarShow=true' v-model="bir"></u-input> -->
						<view class="birthday" @click="calendarShow=true">
							{{birthday?birthday:'请选择生日'}}
						</view>
						<image src="@/static/imags/mypage/bir.png" mode="widthFix"
							style="width: 10%;position: absolute;right: 3%;top: 31%;" @click="calendarShow=true">
						</image>
					</view>
					<u-datetime-picker :show="calendarShow" v-model="birValue" :minDate="-946800000" :maxDate='nowTime'
						mode="date" @confirm='calendarConfirm' @cancel='cancel'></u-datetime-picker>
				</view>
			</view>
			<view class="margin_top">手机号</view>
			<input type='number' class="inputStyle" placeholder="请输入手机号" v-model="mobile" maxlength='18'></input>
			<view class="">
				<view class="margin_top">部门</view>
				<view class="" style="width: 96%;position: relative;">
					<!-- <u-input @focus='calendarShow=true' v-model="bir"></u-input> -->
					<view class="birthday" @click="employeesShow=true">
						{{employees_bm_name?employees_bm_name:'请选择部门'}}
					</view>
					<u-picker :show="employeesShow" keyName="name" :columns="employeesColumns"
						@confirm='employeesConfirm' @cancel='employeesShow=false'>
					</u-picker>
				</view>
			</view>
			<view class="margin_top">微信号</view>
			<input type='number' class="inputStyle" placeholder="请输入微信号" v-model="wechat_code" maxlength='18'></input>
			<view class="margin_top">省市</view>
			<view class="flexbetween inputStyle">
				<uni-data-picker :localdata="items" placeholder="请选择所在的省市" popup-title="请选择地区" v-model="area"
					@change="bindPickerChange">
					<text class="word12" v-if="!area.length">请选择所在的省市</text>
					<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}</text>
				</uni-data-picker>
				<!-- <view class="address"></view> -->
			</view>
			<view class="margin_top">身份证号</view>
			<input type='number' class="inputStyle" placeholder="请输入身份证号" v-model="idcard" maxlength='18'></input>
			<view class="margin_top">身份证头像面</view>
			<view class="allimage flexleft">
				<view class="flexcenter itemlable" style="flex-wrap: wrap;" v-if="idcard_zimage.length"
					v-for="(item,index) in idcard_zimage" :key="index">
					<view class="itemimage">
						<image :src="item" mode=""></image>
						<view class="deleteIMg" @click="delimage(1)"></view>
					</view>
				</view>
				<view class="itemlable flexcenter">
					<view class="upload flexcenter" @click="upload(idcard_zimage)"
						v-if="idcard_zimage.length >= 1?false:true">
						<u-icon name='plus'></u-icon>
					</view>
				</view>
			</view>
			<view class="margin_top">身份证国徽面</view>
			<view class="allimage flexleft">
				<view class="flexcenter itemlable" style="flex-wrap: wrap;" v-if="idcard_fimage.length"
					v-for="(item,index) in idcard_fimage" :key="index">
					<view class="itemimage">
						<image :src="item" mode=""></image>
						<view class="deleteIMg" @click="delimage(2)"></view>
					</view>
				</view>
				<view class="itemlable flexcenter">
					<view class="upload flexcenter" @click="upload(idcard_fimage)"
						v-if="idcard_fimage.length >= 1?false:true">
						<u-icon name='plus'></u-icon>
					</view>
				</view>
			</view>
			<!-- <view class="margin_top">
				昵称
			</view>
			<input v-model="nickName" class="inputStyle" placeholder="请输入昵称" style='margin-bottom: 40rpx;'></input> -->
			<!-- <u-button color='#3476fe' style='margin:30rpx 0 ;' @click='submit'>确认修改</u-button> -->
		</view>
		<view class="" style="padding: 0 71rpx;">
			<view class="buttonStyle flexcenter" @click='submit'>确认修改</view>
		</view>
		<view class="bottom flexcolumn">
			<view class="gongsimsg flexcenter">
				<view class="gslogo">
					<image :src="Config.gs_logo" mode=""></image>
				</view>
				<text>{{Config.gs_name}}</text>
			</view>
			<view class="contract">{{Config.gs_tel}}</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				// 部门
				employeesShow: false,
				employeesColumns: [],
				items: [], // 选择地区内容
				area: [], // 选择地区内容

				mobile: "", //手机号
				gender: 1, //性别:1=男,2=女
				birthday: "", //生日
				username: '', //姓名
				employees_bm_id: "", //部门id
				employees_bm_name: "", //部门名称
				wechat_code: "", //微信号
				province_id: "", //省id
				city_id: "", //市id
				idcard: "", //身份证号
				idcard_zimage: [], //身份证头像面
				idcard_fimage: [], //身份证国徽面

				sex: '男',
				calendarShow: false,
				birValue: Number(new Date()),
				nowTime: new Date().getTime(),
				IDcard: '',
				job: '',
				nickName: '',
				sexShow: false,
				columns: [
					['男', '女']
				],
				Config: {},
				pageShow:false
			}
		},
		onShow() {
			this.getConfigInfo()
			this.getEmployeesInfo()
			
		},
		onLoad() {
			let arr = JSON.parse(JSON.stringify(citys.data))
			console.log(this.items, "99999999999999999")
			arr.forEach(item => {
				item.children.forEach(value => {
					value.children = []
				})
			})
			this.items = arr
			this.getinfo()
		},
		methods: {
			getConfigInfo() {
				httpRequest.request('/employeesapi/index/getConfigInfo', 'GET', {}).then(resp => {
					this.Config = resp.data
				})
			},
			getEmployeesInfo() { //部门
				httpRequest.request('/employeesapi/user/getEmployeesBm', 'GET', {}).then(res => {
					console.log(res.data)
					this.employeesColumns.push(res.data)
					console.log(this.employeesColumns)
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			getinfo() {
				httpRequest.request('/employeesapi/user/index', 'POST', {}).then(res => {
					let data = res.data
					this.mobile = data.mobile
					this.gender = data.gender
					this.sex = this.gender == 1 ? "男" : "女"
					this.birthday = data.birthday
					this.username = data.username
					this.employees_bm_id = data.employees_bm_id
					let index = this.employeesColumns[0].findIndex(item => {
						return item.id == this.employees_bm_id
					})
					if (index != -1) {
						this.employees_bm_name = this.employeesColumns[0][index].name
					}
					this.wechat_code = data.wechat_code || ""
					this.province_id = data.province_id
					this.city_id = data.city_id
					this.items.forEach(item => {
						if (item.value == this.province_id) {
							this.area[0] = item.text
						}
						item.children.forEach(ite => {
							if(ite.value==this.city_id){
								this.area[1] = ite.text
							}
						})

					})
					this.idcard = data.idcard || ""
					if(data.idcard_zimage){
						this.idcard_zimage = [data.idcard_zimage]
					}
					if(data.idcard_fimage){
						this.idcard_fimage = [data.idcard_fimage]
					}
					this.pageShow=true
				})
			},
			calendarConfirm(e) {
				this.birthday = this.date(e.value)
				this.calendarShow = false
			},
			// 日期转换
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			cancel() {
				this.calendarShow = false
			},
			bindPickerChange(val) { // 选择地区内容
				let area = val.detail.value
				console.log(area)
				this.area = [area[0].text, area[1].text];
				this.province_id = area[0].value;
				this.city_id = area[1].value;
			},
			upload(arr) {
				let _this = this;
				let pzimage = arr;
				let num = 1 - pzimage.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], pzimage)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i], pzimage)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {
						console.log(res)
					}
				});
			},
			uploadImageService(url, upImg) {
				console.log(111)
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(image_item);
				}).catch(err => {});
			},
			// 删除图片
			delimage(e) {
				if(e==1){
					this.idcard_zimage=[]
				}else{
					this.idcard_fimage=[]
				}
			},
			submit() {
				let _this = this
				if(!_this.username){
					httpRequest.toast("请输入真实姓名！")
					return false
				}
				if(!_this.birthday){
					httpRequest.toast("请选择生日！")
					return false
				}
				if(!_this.mobile){
					httpRequest.toast("请输入手机号！")
					return false
				}
				if(!_this.employees_bm_id){
					httpRequest.toast("请选择部门！")
					return false
				}
				if(!_this.province_id){
					httpRequest.toast("请选择省！")
					return false
				}
				if(!_this.city_id){
					httpRequest.toast("请选择市！")
					return false
				}
				httpRequest.request('/employeesapi/user/editYgInfo', 'GET', {
					mobile: _this.mobile, //手机号
					gender: _this.gender, //性别:1=男,2=女
					birthday: _this.birthday, //生日
					username: _this.username, //姓名
					employees_bm_id: _this.employees_bm_id, //部门id
					wechat_code: _this.wechat_code, //微信号
					province_id: _this.province_id, //省id
					city_id: _this.city_id, //市id
					idcard: _this.idcard, //身份证号
					idcard_zimage: _this.idcard_zimage.join(), //身份证头像面
					idcard_fimage: _this.idcard_fimage.join(), //身份证国徽面
					ly: 1
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					}
					console.log(res, 111)
				})
			},
			employeesConfirm(e) {
				console.log(e)
				this.employeesShow = false
				this.employees_bm_id = e.value[0].id
				this.employees_bm_name = e.value[0].name
			},
			sexConfirm(n) {
				console.log(n.value[0]);
				this.sex = n.value[0]
				if (this.sex == "男") {
					this.gender = 1
				} else {
					this.gender = 2
				}
				this.sexShow = false
			},
		},
	}
</script>

<style scoped lang="scss">
	.iteminput {
		padding: 20rpx 30rpx;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}

	.allimage {
		flex-wrap: wrap;
	}

	.itemlable {
		margin-top: 30rpx;
		width: 25%;

	}

	.itemimage {
		position: relative;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 5rpx;
		}
	}

	.upload {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #999999;
		border-radius: 5rpx;
	}

	.forms {
		width: 100%;
		padding: 52rpx 39rpx 20rpx 36rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.margin_top {
		margin: 10rpx;
		font-weight: 800;
	}

	.birthday {
		width: 100%;
		height: 74rpx;
		border: 1rpx solid #999999;
		border-radius: 20rpx;
		line-height: 74rpx;
		color: #333;
		text-indent: 1em;
	}

	.sexSelect {
		width: 100%;
		height: 74rpx;
		border: 1rpx solid #999999;
		border-radius: 20rpx;
		line-height: 74rpx;
		color: #333;
		text-indent: 1em, ;
	}

	// 底部
	.bottom {
		position: fixed;
		bottom: 30rpx;
		width: 100%;

	}

	.gongsimsg {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.gslogo {
		width: 39rpx;
		height: 32rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contract {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	::v-deep .u-input--radius {
		border-radius: 20rpx;
	}

	::v-deep .u-border {
		border-color: #999999 !important;
	}

	.inputStyle {
		border: 1rpx solid #999999;
		border-radius: 20rpx;
		height: 81rpx;
		padding-left: 30rpx;
		color: #333;
	}
</style>